import { Component } from 'react';
import { connect } from 'dva';
import { Layout, Menu, Row, Col, Dropdown } from 'antd';
import {
    PhoneOutlined, MailOutlined, EnvironmentOutlined, ApartmentOutlined, CopyrightOutlined,
    SecurityScanOutlined, UserOutlined
} from '@ant-design/icons';

import { Link, history, withRouter } from 'umi';

import styles from './primaryLayout.css';


const { Header, Footer, Sider, Content } = Layout;
@withRouter
@connect(({ loading, dispatch, user }) => ({
    loading, dispatch, user
}))
class PrimaryLayout extends Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {

    }

    render() {
        const { user, location, children, websiteInfo } = this.props;
        const { userInfo } = user;
        const isLogin = userInfo.userId !== -1;

        const pages = [
            {
                key: "homePage",
                label: "首页",
            },
            {
                key: "studentManagement",
                label: "学生管理",
            },
            {
                key: "example",
                label: "示例",
            },
            {
                key: "example1",
                label: "示例1",
            },
            {
                key: "studentManagement1",
                label: "学生管理1",
            },
            {
                key: "proTableDemo",
                label: "ProTable示例",
            },
        ]
        const pathList = location.pathname.split('/').filter(_ => _ !== "");
        let targetPageKey = 'homePage'
        pages.some(p => {
            return pathList.some(path => {
                if (p.key.indexOf(path) != -1 || path.indexOf(p.key) != -1) {
                    targetPageKey = p.key;
                    return true;
                }
                return false;
            })
        })

        return (
            <Layout style={{ background: '#fff' }}>
                <Header className={styles.header} >
                    <Row justify={'space-between'} align={'middle'} wrap={false}>
                        <Col span={6}>
                            <h1>umi 脚手架</h1>
                        </Col>
                        <Col offset={14} span={2}>
                            {
                                (!isLogin) ? (
                                    <Link className={styles.button} to='/login'><UserOutlined /><span className={styles.userButtonText}>学生登陆</span></Link>
                                ) : (
                                    <Dropdown
                                        menu={{
                                            items: [
                                                {
                                                    label: <Link to={"/mycenter"}>个人中心</Link>,
                                                    key: 'mycenter'
                                                },
                                                {
                                                    label: <Link to='/login' onClick={() => this.props.dispatch({ type: "user/logout" })}>退出登录</Link>,
                                                    key: 'logout'
                                                }
                                            ],
                                        }}
                                        trigger={['click']}
                                    >
                                        <a className={styles.button} style={{ color: '#005CBB' }}>
                                            <UserOutlined />
                                            &nbsp;
                                            <span className={styles.userButtonText}>
                                                姓名：</span>
                                            {userInfo.userName}
                                        </a>
                                    </Dropdown>
                                )
                            }
                        </Col>
                    </Row>
                </Header>
                <Layout>
                    <Sider>
                        <Menu
                            theme="dark" mode="inline"
                            defaultOpenKeys={[targetPageKey || ""]} defaultSelectedKeys={[targetPageKey || ""]}
                            items={pages}
                            onClick={e => {
                                history.push({ pathname: ("/" + e.key) })
                            }}
                        />
                    </Sider>
                    <Content className={styles.content}>
                        <br />
                        <div className={styles.page}>
                            {children}
                        </div>
                    </Content>
                </Layout>

                <Footer style={{ background: '#005CBB', minHeight: '11vh' }} >
                    <Row justify={'space-around'} align={'middle'} style={{ color: 'white' }}>
                        <Col offset={3}><h1>LOGO</h1></Col>
                        <Col>
                            <div><PhoneOutlined />联系电话：027-12345678</div>
                            <div><MailOutlined />邮箱：abc@efg.com</div>
                        </Col>
                        <Col>
                            <div><ApartmentOutlined />邮政编码：123456</div>
                            <div><EnvironmentOutlined />地址：武汉市江汉区XXXXX</div>
                        </Col>
                        <Col >
                            <div><SecurityScanOutlined />备案信息：...</div>
                            <div>版权所有<CopyrightOutlined />武汉XXXX有限公司</div>
                        </Col>
                        <Col span={2} />
                    </Row>
                </Footer>
            </Layout>
        )
    }
}

export default connect()(PrimaryLayout);
// export default BasicLayout;